import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

// Basic List
//const CITY_NAMES = [
//  '北京',
//  '上海',
//  '广州',
//  '深圳',
//  '杭州',
//  '苏州',
//  '成都',
//  '武汉',
//  '郑州',
//  '洛阳',
//  '厦门',
//  '青岛',
//  '拉萨'
//];

// ExpansionTile
//const CITY_NAMES = {
//  '北京': ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '顺义区'],
//  '上海': ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '闸北区', '虹口区'],
//  '广州': ['越秀', '海珠', '荔湾', '天河', '白云', '黄埔', '南沙', '番禺'],
//  '深圳': ['南山', '福田', '罗湖', '盐田', '龙岗', '宝安', '龙华'],
//  '杭州': ['上城区', '下城区', '江干区', '拱墅区', '西湖区', '滨江区'],
//  '苏州': ['姑苏区', '吴中区', '相城区', '高新区', '虎丘区', '工业园区', '吴江区']
//};

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();
}

//class MyApp extends StatelessWidget {

class _MyAppState extends State<MyApp> {
  List<String> cityNames = [
    '北京',
    '上海',
    '广州',
    '深圳',
    '杭州',
    '苏州',
    '成都',
    '武汉',
    '郑州',
    '洛阳',
    '厦门',
    '青岛',
    '拉萨'
  ];

  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        _loadData();
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
//    final title = 'Basic List';

//    final title = '可折叠的列表';

//    final title = '网格布局';

    final title = '高级功能列表下拉刷新与上拉家族更多功能实现';

    // 垂直滚动
//    return MaterialApp(
//      title: title,
//      home: Scaffold(
//        appBar: AppBar(
//          title: Text(title),
//        ),
//        body: Container(
//          child: ListView(
//            scrollDirection: Axis.horizontal,
//            children: _buildList(),
//          ),
//        ),
//      ),
//    );

    // 水平滚动
//    return MaterialApp(
//      title: title,
//      home: Scaffold(
//        appBar: AppBar(
//          title: Text(title),
//        ),
//        body: Container(
//          height: 200,
//          child: ListView(
//            scrollDirection: Axis.horizontal,
//            children: _buildList(),
//          ),
//        ),
//      ),
//    );

    // 可折叠的列表
//    return MaterialApp(
//      title: title,
//      home: Scaffold(
//        appBar: AppBar(
//          title: Text(title),
//        ),
//        body: Container(
//          child: ListView(
//            children: _buildList(),
//          ),
//        ),
//      ),
//    );

    // 网格布局
//    return MaterialApp(
//      title: title,
//      home: Scaffold(
//        appBar: AppBar(
//          title: Text(title),
//        ),
//        body: GridView.count(
//          crossAxisCount: 3,
//          children: _buildList(),
//        ),
//      ),
//    );

    // 高级功能列表下拉刷新与上拉家族更多功能实现
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: RefreshIndicator(
            onRefresh: _handleRefresh,
            child: ListView(
              controller: _scrollController,
              children: _buildList(),
            )),
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  _loadData() async {
    await Future.delayed(Duration(milliseconds: 200));
    setState(() {
      List<String> list = List<String>.from(cityNames);
      list.addAll(cityNames);
      cityNames = list;
    });
  }

  Future<Null> _handleRefresh() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      cityNames = cityNames.reversed.toList();
    });
    return null;
  }

//  List<Widget> _buildList() {
//    List<Widget> widgets = [];
//    CITY_NAMES.keys.forEach((key) {
//      widgets.add(_item(key, CITY_NAMES[key]));
//    });
//    return widgets;
//  }

//  List<Widget> _buildList() {
//    return CITY_NAMES.map((city) => _item(city)).toList();
//  }

  List<Widget> _buildList() {
    return cityNames.map((city) => _item(city)).toList();
  }

  // 垂直滚动
//  Widget _item(city) {
//    return Container(
//      height: 80,
//      margin: EdgeInsets.only(bottom: 5),
//      alignment: Alignment.center,
//      decoration: BoxDecoration(color: Colors.teal),
//      child: Text(
//        city,
//        style: TextStyle(color: Colors.white, fontSize: 20),
//      ),
//    );
//  }

  // 水平滚动
//  Widget _item(String city) {
//    return Container(
//      width: 160,
//      margin: EdgeInsets.only(right: 5),
//      alignment: Alignment.center,
//      decoration: BoxDecoration(color: Colors.teal),
//      child: Text(
//        city,
//        style: TextStyle(color: Colors.white, fontSize: 20),
//      ),
//    );
//  }

  // 可折叠的列表
//  Widget _item(String city, List<String> subCities) {
//    return ExpansionTile(
//      title: Text(
//        city,
//        style: TextStyle(color: Colors.black54, fontSize: 20),
//      ),
//      children: subCities.map((subCity) => _buildSub(subCity)).toList(),
//    );
//  }
//
//  Widget _buildSub(String subCity) {
//    return FractionallySizedBox(
//      widthFactor: 1,
//      child: Container(
//        height: 50,
//        margin: EdgeInsets.only(bottom: 5),
//        decoration: BoxDecoration(color: Colors.lightBlueAccent),
//        child: Text(subCity),
//      ),
//    );
//  }

  // 网格布局
//  Widget _item(String city) {
//    return Container(
//      height: 80,
//      margin: EdgeInsets.all(1),
//      alignment: Alignment.center,
//      decoration: BoxDecoration(color: Colors.teal),
//      child: Text(
//        city,
//        style: TextStyle(color: Colors.white, fontSize: 20),
//      ),
//    );
//  }
  // 高级功能列表下拉刷新与上拉家族更多功能实现
  Widget _item(String city) {
    return Container(
      height: 80,
      margin: EdgeInsets.all(1),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.teal),
      child: Text(
        city,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    );
  }
}
